<script setup>
	import {
		computed,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		delayApi
	} from '@/apis/task.js'
	// 1. 延迟提货表单数据
	const formData = ref({
		delayReason: "", //  延迟原因
		"delayTime": "", // 延迟时间
		"id": "" // 任务 id
	})
	//  原计划提货时间
	const planTime = ref('')
	onLoad((params) => {
		console.log('参数：', params);
		formData.value.id = params.id
		planTime.value = params.planDepartureTime
	})

	// 2. 选择延迟时间
	const selectTime = (e) => {
		console.log('选中时间：', e.detail.value);
		// 1. 获取原计划提货时间年月日
		// const planDate = planTime.value.split(' ')[0]
		const [planDate] = planTime.value.split(' ')
		// 2.  拼接延迟时间
		formData.value.delayTime = `${planDate} ${e.detail.value}`
	}

	// 3.  统计用户输入的延迟原因字数
	const total = computed(() => formData.value.delayReason.length)

	// 4. 校验
	/**
	 * 校验思路：
		  1. 使用计算属性计算选择的当天提货时间和原定时间是否超过两小时：end - start > 0 && end - start <= 7200 * 1000
		  2. 使用计算属性计算字数是否在 50 字范围内： wordsCount.value <= 50 && wordsCount.value > 0
		  3. 校验不通过，使用error类名标红提醒
	 */
	// 延迟时间校验：true 校验通过 ｜ false 校验失败
	const isDelayTimeOk = computed(() => {
		// 获取原计划提货时间的时间戳
		const start = +new Date(planTime.value)
		// 获取选择的延迟时间的时间戳
		const end = +new Date(formData.value.delayTime)
		//  说明：end - start > 0 选择的时间要大于 start 时间 && end - start <= 7200 * 1000  选择时间基于 start 不能超过 2 小时
		return end - start > 0 && end - start <= 7200 * 1000
	})
	//  延迟原因校验
	const isDelayReasonOk = computed(() => {
		return formData.value.delayReason.length <= 50 && formData.value.delayReason.length > 0
	})

	//  兜底校验: true  禁用按钮 | false 不禁用=》按钮的启用禁用实现兜底校验
	const isSubmitDisable = computed(() => {
		return !isDelayTimeOk.value || !isDelayReasonOk.value
	})

	// 5.  表单提交
	const submit = async () => {
		console.log(' 校验通过');
		await delayApi(formData.value)
		setTimeout(() => {
			uni.showToast({
				title: '延迟成功！'
			})
		}, 1000)
		uni.reLaunch({
			url: '/pages/task/index'
		})
	}
</script>

<template>
	<view class="page-container">
		<uni-list :border="false">
			<uni-list-item title="原定时间" showArrow :rightText="planTime" />
			<uni-list-item title="延迟时间" showArrow>
				<template #footer>
					<!-- 
					 通过具名插槽 footer 显示时间选择器=》自定义右侧显示的内容
					 内置组件picker，mode=time 用来做时间选择
					 -->
					<picker @change="selectTime" class="time-picker" mode="time" :value="planTime.split(' ')[1]">
						<!-- 
						1. 没有选择（formData.delayTime值为空）=》显示提示
						2. 选择了=》显示选择的值
						 -->
						<text v-if="!formData.delayTime">不可超过2个小时</text>
						<text :class="{error: isDelayTimeOk === false}" v-else>{{formData.delayTime+':00'}}</text>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item direction="column">
				<template v-slot:body>
					<view class="textarea-wrapper">
						<textarea v-model="formData.delayReason" class="textarea" placeholder-style="color: #818181"
							placeholder="请输入延迟提货原因"></textarea>
						<text :class="{error: !isDelayReasonOk}" class="words-count">{{total}}/50</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item :border="false">
				<template v-slot:body>
					<button @click="submit" :disabled="isSubmitDisable" class="button">提交</button>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>